<template>
	<div class="app-container">
		<!--操作按钮-->
		<!-- <div style="padding-bottom: 30px;" class="operation_container">
			<ul>
				<li><el-button @click="handleCancel">返回</el-button></li>
				<li><el-button type="primary" @click="handleSubmit">保存</el-button></li>
			</ul>
		</div> -->
		<!--折叠面板-->
		<el-collapse v-model="activeNames" @change="handleChange">
			<!-- <el-collapse-item name="basicInfo">
				<template slot="title">
					<span>入库基本信息</span>
					<i class="header-icon el-icon-info" />
				</template>
				<el-form ref="form" :model="data" :rules="rules" :inline="true" size="mini" label-width="125px">
					<el-row :gutter="24" class="form-item-group">
						<el-col :span="6">
							<el-form-item label="客户代码：" prop="customerNo">
								<el-input v-model="data.customerNo" class="filter-item">
									<i slot="suffix" class="el-input__icon el-icon-search" @click="openFromSelector" />
								</el-input>
								<customer-selector :visible.sync="fromSelectorVisible" @selected="handleFromSelected" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="客户名称" prop="customerName">
								<el-input v-model="data.customerName" placeholder="请输入" />
							</el-form-item>
						</el-col>
						<el-col :span="6">

							<el-form-item label="入库仓库：" prop="warehouseCode">
								<el-select v-model="data.warehouseCode" filterable clearable
									@change="customerAtSelectChange">
									<el-option v-for="item in selects.warehouseList" :key="item.id"
										:label="item.warehouserName" :value="item.id" />

								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="预期收货日期：" prop="preArrivedTime">
								<el-date-picker v-model="data.preArrivedTime" type="date" placeholder="选择日期" />
							</el-form-item>
						</el-col>

					</el-row>

					<el-row :gutter="24" class="form-item-group">



					</el-row>


				</el-form>
			</el-collapse-item> -->
			<el-collapse-item name="itemInfo">
				<template slot="title">
					<span>填写数据</span>
					<i class="header-icon el-icon-info" />
				</template>
				<!-- <el-button type="primary" style="margin-top: 6px; margin-bottom: 1px;" 
					@click="handleItemFormDisplay">填写明细</el-button> -->
				<el-button type="primary" @click="handleSubmit">保存</el-button>
				<el-card v-if="itemDisplay" class="box-card" style="margin-top:20px;">
					<el-form ref="itemForm" :model="itemData" :inline="true" size="mini" label-width="125px">
						<el-row :gutter="24" class="form-item-group">
							<el-col :span="6">
								<el-form-item label="工具编号：">
									<el-input v-model="itemData.materialNo" class="filter-item">
										<i slot="suffix" class="el-input__icon el-icon-search"
											@click="openMaterialSelector" />
									</el-input>
								</el-form-item>
								<material-selector :visible.sync="materialSelectorVisible"
									@selected="handleMaterialSelected" />
							</el-col>

							<el-col :span="6">

								<el-form-item label="工具名称：">
									<el-input v-model="itemData.materialName" placeholder="" />
								</el-form-item>

							</el-col>
							<!--  <el-col :span="6">
                <el-form-item label="分类：">
                  <el-input v-model="itemData.categoryTreeNames" disabled />
                </el-form-item>
              </el-col> -->
							<el-col :span="6">
								<el-form-item label="厂区：">
								<el-select v-model="itemData.stageNo" filterable clearable>
								  <el-option v-for="item in selects.warehouseList" :key="item.id" :label="item.warehouserName" :value="item.id" />
								</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="包装数量：">
									<el-input v-model="itemData.quantity" type="number" />
								</el-form-item>
							</el-col>
							<el-button v-if="itemDisplay" type="primary" style="float:right;margin: 10px 50px 1px 0"
								@click="handleItemAdd">添加</el-button>
						</el-row>
					</el-form>
				</el-card>
				<el-divider />
				<el-table :data="data.itemList" border stripe fit highlight-current-row>
					<el-table-column align="center" label="序" width="95">
						<template slot-scope="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="工具名称" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.materialName }}</span>
						</template>
					</el-table-column>
					
					<el-table-column label="数量" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.quantity }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button type="text" @click="handleItemEdit(scope.row)">修改</el-button>
							<el-button type="text" @click="handleItemDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import waves from '@/directive/waves'
	import appConstant from '@/constant/AppConstant'
	import TreeUtils from '@/utils/TreeUtils'
	import TbWmsTemplateApi from '@/api/web/TbWmsTemplateApi'
	import TbWmsMaterialReceiptApi from '@/api/web/TbWmsMaterialReceiptApi'
	import MaterialSelector from '@/views/goods/sku/SkuSelector'
	import WarehouseApi from '@/api/basic/WarehouseApi'
	import CustomerSelector from '@/views/basic/customer/CustomerSelector'
	import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'
	import LocationApi from '@/api/basic/LocationApi'
	export default {
		directives: {
			waves
		},
		components: {
			WarehouseCustomerSelector,
			MaterialSelector,
			CustomerSelector
		},
		data() {
			return {
				activeNames: [
					'basicInfo',
					'itemInfo'
				],
				selects: {
					warehouseList: []
					// vehicleTypes: []


				},
				operation: undefined,
				data: {
					isValid: appConstant.Y,
					customerNo: '2000',
					itemList: []
				},
				// 校验规则的名称必须和校验字段的名称一致
				rules: {
					// departureIdList: [{ required: true, message: '_', trigger: 'change' }],
					// destinationIdList: [{ required: true, message: '_', trigger: 'change' }]
				},
				materialSelectorVisible: false,
				materialWarehouseSelectorVisible: false,
				fromSelectorVisible: false,
				// toSelectorVisible: false,
				// orgSelectorVisible: false,
				itemDisplay: true,
				itemData: {
					materialNo: undefined,
					materialName: undefined,
					stageNo: undefined,
					quantity: undefined
				},

			}
		},
		created() {
			this.initForm()
			this.loadSelects()
		},
		methods: {
			initForm() {
				const id = this.$route.params.id
				if (id) {
					this.operation = 'edit'
					TbWmsTemplateApi.get(id).then(response => {
						this.data = response.data
						// if (this.data.departCity) {
						//   this.data.departureIdList = this.data.departCity.split(',')
						// }
						// if (this.data.deliveryCity) {
						//   this.data.destinationIdList = this.data.deliveryCity.split(',')
						// }
					})
				} else {
					this.operation = 'add'
				}
			},
			loadSelects() {
				// LocationApi.list().then(response => {
				//   this.selects.locationList = TreeUtils.list2Tree(response.data)
				// })
				WarehouseApi.list({
					warehouseType: 'center'
				}).then(res => {
					this.selects.warehouseList = res.data
				})

			},
			handleSubmit() {



				TbWmsMaterialReceiptApi.addReceiptTools(this.data).then(response => {
					this.$message.success('随车工具入库成功！')
					this.$router.go(-1)
				})

			},
			handleCancel() {
				this.$router.go(-1)
			},
			handleChange(val) {
				console.log(val)
			},
			openMaterialSelector() {
				this.materialSelectorVisible = true
			},
			openMaterialWarehouseSelector() {
				this.materialWarehouseSelectorVisible = true
			},

			handleMaterialWarehouseSelected(obj) {
				this.data.materialNo = obj.id
			},
			handleMaterialSelected(obj) {
				this.itemData.materialNo = obj.id,
					this.itemData.materialName = obj.skuName
				//{
				// materialId: obj.id,
				// materialName: obj.materialName,
				// categoryTreeNames: obj.categoryTreeNames,
				// orderQuantity: obj.orderQuantity
				// }
			},
			openFromSelector() {
				this.fromSelectorVisible = true
			},
			handleFromSelected(obj) {
				this.data.customerNo = obj.id
				this.data.customerName = obj.customerName
				this.data.salesPhone = obj.phone
				this.data.pickupAddress = obj.address
				this.data.departCity = obj.areaDesc
				if (this.data.departCity) {
					this.data.departureIdList = this.data.departCity.split(',')
				}
			},
			openToSelector() {
				this.toSelectorVisible = true
			},
			handleToSelected(obj) {
				this.data.consigneeId = obj.id
				this.data.consigneeName = obj.consigneeName
				this.data.consigneePhone = obj.linkManPhone
				this.data.deliveryAddress = obj.consigneeAddress
				this.data.deliveryCity = obj.areaDesc
				if (this.data.deliveryCity) {
					this.data.destinationIdList = this.data.deliveryCity.split(',')
				}
			},
			handleItemFormDisplay() {

				// if (!this.data.customerNo) {
				// 	this.$message.warning('请选择客户！')
				// 	return
				// }

				this.itemDisplay = !this.itemDisplay
				this.itemData = {}
			},
			handleItemAdd() {
				if (!this.itemData.materialName) {
					this.$message.warning('请选择物料！')
					return
				}
				if (!this.itemData.stageNo) {
					this.$message.warning('请选择厂区！')
					return
				}
				// 解决itemList中所有item的内存地址一样的问题
				const data = {
					...this.itemData
				}
				this.data.itemList.push(data)
				this.itemData = {}
				this.$message.success('添加成功！')
			},
			handleItemEdit(data) {
				this.itemDisplay = true
				this.itemData = {
					...data
				}
				this.handleItemDelete(data)
			},
			handleLocationChange() {
				// 先清空里程
				this.data.miles = undefined
				if (this.data.departureIdList.length !== 0 && this.data.destinationIdList.length !== 0) {
					// 根据起始地和目的地，查询线路信息
					// const params = {
					//   startLocation: this.data.departureIdList.split(','),
					//   endLocation: this.data.destinationIdList.split(',')
					// }
				}
			},
			handleItemDelete(data) {
				const index = this.data.itemList.indexOf(data)
				this.data.itemList.splice(index, 1)
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>